<template>
  <div>
     <div   class="grid-content" >
       <el-container>
          <el-header >
        <MyHeader ></MyHeader>
      </el-header>
       </el-container>
     </div>
    <h1>测试999999999</h1>
    <h2>2222222</h2>
    <h3>333333333</h3>
    <h6>66666666</h6>
    <p>
      This is some text in a very short paragraph 标签定义段落。
      p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定
    </p>

    <a
      href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-cypress"
      target="_top"
      rel="noopener"
    >e2e-cypress</a>
    <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
    <el-link type="primary">主要链接</el-link>
    <el-link type="success">成功链接</el-link>
    <el-link :underline="false">无下划线</el-link>
    <el-link href="https://element.eleme.io">
      查看
      <i class="el-icon-view el-icon--right"></i>
    </el-link>

    <router-link to="/Container/122">#Container 布局容器</router-link>
    <el-button  type="primary" @click="onRouter()">uoap的home</el-button>
      <router-link to="/uoap/login">-------登录页面</router-link>
  </div>
</template>
<script>
import MyHeader from "./UOAP/header.vue";
export default {
components:{
MyHeader:MyHeader
},
  methods: {
    onRouter() {
      // alert("上联：山石岩下古木枯");
      this.$router.push("/uoap/home");
    }
  }
};
</script>

<style lang="scss" >
.grid-content{
 
  height: 100px;
  width: 100% ;
  display: flex;
 
}
  .grid-content::before {
    z-index: -999;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100px;
    background-color:  #ffffff;
    background-size: cover;
     box-shadow:0  0  2px 1px #F0F3F4
  }
</style>